<template>
  <div>
    <h1>补番推荐:</h1>
    <ul>
      <li v-for="item in list" :key="item.name">番名:{{item.name}} --- 类型:{{item.type}}</li>
    </ul>
    <button @click="addList">点击添加</button>
    <ul>
      <li v-for="(key,value) in obj" :key="key + 1">{{key}} --- {{value}}</li>
    </ul>
    <button @click="$set(obj,'ss','yy')">点击添加</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      list: [
        {name:'邻家索菲',type:'百合'},
        {name:'摇曳百合',type:'百合'},
        {name:'樱Trick',type:'百合'}
      ],
      obj:{id:1,name:'xx',age:12}
    }
  },
  methods: {
    addList(){
      // 数组内部添加的元素想被响应式需要使用vue封装过的push方法
      this.list.push({name:'xxx',type:'yyy'})
    }
  }
}
</script>

